<template>
  <div>
    <Card style="padding-left:20px;padding-right:20px;">
      <Row gutter="40">
        <i-col span="7">
          <Input v-model="tagName" placeholder="标签名称" />
        </i-col>
        <i-col span="7">
          <Input v-model="appntId" placeholder="投保人编码" />
        </i-col>
        <i-col span="6">
          <Input v-model="appntName" placeholder="投保人姓名" />
        </i-col>
      </Row>
      <Row gutter="40" style="margin-top:20px">
        <i-col span="7">
          <Select
                v-model="isclique"
                placeholder="是否是集团客户"
                clearable
              >
                <Option key="0" value="0">是</Option>
                <Option key="1" value="1">否</Option>
              </Select>
        </i-col>
        <i-col span="7">
          <Input v-model="integral" placeholder="投保人积分" />
        </i-col>
        <i-col span="6">
          <Input v-model="service" placeholder="开通服务" />
        </i-col>
      </Row>
      <Row>
        <i-col span="24" style="margin-top:20px">
          <Button type="primary" style="margin-right:20px" @click="query" :loading="querySubmit">查询</Button>
          <Button type="default" style="margin-right:20px" @click="resetInfo">重置</Button>
          <Button type="primary" @click="deleteUserPicture()">删除</Button>
          <Button
            type="primary"
            style="margin-left:20px;margin-right:20px"
            @click="downloadModel()"
          >模板下载</Button>
          <Uploadv
            ref="upload"
            :before-upload="handleUpload"
            :show-upload-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadFail"
            :action="action"
            :headers="{
                'Authorization':credentials
              }"
            :data="{
              operatorCode:1
            }"
            name="file"
            style="display:inline-block"
          >
            <Button type="primary">导入</Button>
          </Uploadv>
        </i-col>
      </Row>
      <!-- 删除 -->
      <Modal v-model="delMedal" header-hide="true" footer-hide="true" width="450" :mask-closable="false" >
        <div>
          <span style="font-size:28px; color:#FF9900;margin: 0 10px;">
            <Icon type="ios-help-circle" />
          </span>
          <span slot="header" style="font-size:16px">删除确认</span>
        </div>
        <span style="display:block;margin:20px 0 20px 60px; font-size:14px;">您确定要删除吗？</span>
        <div style="width:400px; text-align:right;">
          <Button type="primary" @click="delSubmit" style="margin-right:20px;">确定</Button>
          <Button @click="delCancel">取消</Button>
        </div>
      </Modal>
      <Button @click="info" v-if="false"></Button>
    </Card>
    <Card style="padding-left:20px;padding-right:20px;margin-top:20px">
      <Table :columns="columns1" :data="data1" @on-selection-change="selectChange">
        <template slot-scope="{row}" slot="integral">
          {{ row.integral!==""?row.integral:'-' }}
        </template>
        <template slot-scope="{row}" slot="service">
          {{ row.service!==""?row.service:'-' }}
        </template>
      </Table>
      <Row>
        <i-col span="24" style="text-align:right;margin-top:20px">
          <Page
            :total="total"
            show-sizer
            show-total
            @on-change="indexChange"
            @on-page-size-change="pageSizeChange"
            :page-size-opts="pageSizeOptions"
          />
        </i-col>
      </Row>
    </Card>
    <Alert class="warnTip" type="warning" show-icon closable v-if="errorState">
      <p style="font-size:18px;color:red">警告提示：</p>
      <template slot="desc">
        投保人编码
        <span v-for="(item,index) in errorData" :key="index">{{ item }}</span>
        不匹配，不可进行此操作！
      </template>
    </Alert>
  </div>
</template>

<script>
import {exportFile} from "../../util/util"
export default {
  data() {
    return {
      service:null,
      integral:null,
      isclique:null,
      tagName: null,
      appntId: null,
      appntName: null,
      columns1: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "流水号",
          key: "pcId",
          width: 200,
          align: "center"
        },
        {
          title: "标签名称",
          key: "tag",
          width: 250,
          align: "center"
        },
        {
          title: "投保人编码",
          key: "appntNo",
          align: "center"
        },
        {
          title: "投保人姓名",
          key: "appntName",
          align: "center"
        },{
          title: "是否是集团客户",
          key: "isclique",
          align: "center"
        },{
          title: "投保人积分",
          key: "integral",
          align: "center",
          slot:"integral",
        },{
          title: "开通服务",
          key: "service",
          align: "center",
          slot:"service",
        }
      ],
      data1: [],
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      pageObj: null,
      pageSizeOptions: [5, 10, 15, 20],
      pcIds: null,
      uploadFile: null,
      credentials: null,
      errorData: null,
      errorState: false,
      action: "",
      querySubmit: false,
      delMedal: false,
      pcIds: null
    };
  },
  methods: {
    // 获取Session中credentials
    getCredentials() {
      this.credentials = sessionStorage.getItem("credentials");
      this.action =
        // sessionStorage.getItem("userIp") + "api/fileupload/saveUser";
        "/scrm-gateway/scrm-uer/api/fileupload/saveUser";
      //console.log(this.credentials)
    },
    resetInfo() {
      this.querySubmit = false;
      this.tagName = "";
      this.appntId = "";
      this.appntName = "";
    },
    query() {
      if (this.appntName || this.appntId || this.tagName || this.service || this.isclique || this.integral) {
        this.querySubmit = true;
        let obj = {
          appntName: this.appntName,
          appntNo: this.appntId,
          index: this.pageIndex,
          pageSize: this.pageSize,
          tag: this.tagName,
          service:this.service,
          isclique:this.isclique,
          integral:this.integral
        };
        // console.log(obj);
        this.pageObj = obj;
        this.api.getByCondition(obj).then(res => {
          //console.log(res)
          if (res.code == 200) {
            if (res.data.data != null) {
              this.data1 = res.data.data;
              this.total = res.data.total;
              this.querySubmit = false;
              this.info(res.msg);
            } else {
              this.data1 = [];
              this.total = 0;
              this.querySubmit = false;
              this.info("当前暂无数据！");
            }
          } else {
            this.querySubmit = false;
            this.info(res.msg);
          }
        });
      } else {
        this.info("必须选择一个条件！");
      }
    },   
    // 分页查询
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.api.getByCondition(this.pageObj).then(res => {
        //console.log(res)
        if (res.code == 200) {
          this.data1 = null;
          if (res.data.data != null) {
            this.data1 = res.data.data;
            this.total = res.data.total;
          }
        }
      });
    },
    // 删除客户画像条件
    deleteUserPicture() {
      // console.log(this.pcIds);
      if (this.pcIds != null) {
        this.delMedal = true;
      } else {
        this.info("未选择此数据，不可进行此操作！");
        this.delMedal = false;
      }
    },
    delSubmit() {
      this.api.deleteUserPicture({ pcIds: this.pcIds + "" }).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.query(1);
          this.delMedal = false;
          this.info(res.msg);
        } else {
          this.delMedal = false;
          this.info(res.msg);
        }
      });
    },
    delCancel() {
      this.delMedal = false;
    },
    info(tip) {
      this.$Message.info(tip);
    },
    // 页面切换
    indexChange(index) {
      this.pageIndex = index;
      this.pageSubmit();
    },
    // 每页数量切换
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    },

    selectChange(selection) {
      // console.log(selection);
      let list = [];
      selection.forEach(item => {
        list.push(item.pcId);
      });
      // this.pcIds = JSON.stringify(list)
      this.pcIds = list;
      //console.log(this.pcIds)
    },

    handleUpload(file) {
      //console.log(file);
    },
    // 导入成功
    uploadSuccess(response, file, fileList) {
      //console.log(response);
      // console.log(this.credentials)
      if (response.code == 200) {
        this.info("导入成功!");
      } else {
        if (response.data != null) {
          this.errorData = response.data.error;
          for (let i = 0; i < this.errorData.length - 1; i++) {
            this.errorData[i] = this.errorData[i] + "、";
          }
          //console.log(this.errorData);
          this.errorState = true;
        } else {
          this.info(response.msg);
        }
      }
    },
    // 导入失败
    uploadFail(error, file, fileList) {
      // console.log(this.credentials);
      //console.log('失败:')
      //console.log(response,file,fileList)
      this.info("导入失败！");
    },
    // 模板下载
    downloadModel() {
      // this.api.downloadExcel().then(res=>{
      //   console.log(res)
      // })
      let url = "../rest/fileDownload/downloadExcel";
      // window.open(url);
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadExcel")
    }
  },
  watch: {
    dayPass: function(val, oldVal) {
      this.downloadModel();
    }
  },
  mounted() {
    // this.query(1);
    this.getCredentials();
  }
};
</script>
<style scoped lang="less">
.warnTip {
  max-width: 400px;
  max-height: 180px;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
}
.warnTip .ivu-modal-close .ivu-icon-ios-close {
  color: #fff !important;
}
</style>
